<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/vue-router.js"></script>
<script>
    // 在一个router-view 里再包含一个router-view
    let LoginTwo={
        template:`<div>第二个登录</div>`,
    }
    let Login={
        template:`<div>登录
            <router-view><router-view>
            </div>`,
        created(){
            console.log(this.$route.query)
        }
    }
    let Res={
        template:`<div>注册</div>`,
        created(){
            console.log(this.$route.params)
        }
    }
    let router=new VueRouter({
        routes:[
            {name:'login',path:'/login',component:Login,children:[
                // 如果嵌套的路由path加/  则直接显示/path地址  如果没有/ 则显示  父path/path
                {name:'loginTwo',path:'/loginTwo',component:LoginTwo} 
            ]},
            {name:'res',path:'/res/:id',component:Res}
        ]
    })
    let App={
        template:`<div>
                <router-link :to="{name:'login',query:{id:666}}">登录</router-link>             //login?id=666
                <router-link :to="{name:'res',params:{id:666}}">注册</router-link>              //res/666
                <router-link :to="{name:'loginTwo'}">登录2</router-link>              //res/666
                <router-view></router-view>
            </div>`
    }
    new Vue({
        el:'#app',
        template:`<app/>`,
        router:router,
        components:{
            app:App
        }
    })    



</script>
</html>